<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form validate example2</title>
<link  href="css/validate.css" rel="stylesheet"  type="text/css"/>
<link rel="stylesheet" type="text/css" href="../../themes/default/om-all.css" />
<script src="../../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../../ui/om-core.js"></script>
<script type="text/javascript" src="../../ui/om-widget.js"></script>
<script type="text/javascript" src="../../ui/om-validate.js"></script>
<script type="text/javascript" src="../../ui/om-ajaxsubmit.js"></script>
<script type="text/javascript" src="../../ui/om-calendar.js"></script>
<script type="text/javascript" src="../../ui/om-combo.js"></script>
<!-- view_source_begin -->
<style>
	html{ height:100%;}
	body{ height:100%;}
	.input_text {
	    border: 1px solid #6D869E;
	    height: 17px;
	    vertical-align: middle;
	    width: 50%;
	}
	.errorMsg {
	    background:  url(images/alert.png) center no-repeat white;
		background-position: 5px 50%;
		text-align: left;
		padding: 2px 20px 2px 25px;
		border: 1px solid red;
		display: none;
		width: 100px;
		margin-left: 10px;
		position: absolute;
		border-radius: 4px;
	}
	.errorImg{
	    background: url("images/invalid.png") no-repeat scroll 0 0 transparent;
	    height: 16px;
	    width: 16px;
	    cursor: pointer;
	    vertical-align: inherit;
	}
</style>
<script type="text/javascript">
//定义全局的变量，给后台调用前台js留句柄
var validator;
$(document).ready(function() {
  //*************************下面是定义页面的一些js控件***********************************************
    $('#birthday').omCalendar({
        onSelect : function(){
            $('input[name=birthday]').focus();
        }
    });
    $('#payday').omCalendar({
        onSelect : function(){
            $('input[name=payday]').focus();
        }
    });
    $('#joinday').omCalendar({
        onSelect : function(){
            $('input[name=joinday]').focus();
        }
    });
    $('input[name=sex]').omCombo({			//初始化Combo
        dataSource : [ {text : '男', value : 'man'}, 
                       {text : '女', value : 'woman'}]
    });
    
    //*************************下面是校验代码主体***********************************************
    
    validator = $("#form1").validate({
	    rules : {
	        fileNo : {
	            required : true,
	            minlength : 11,
	            fileNoStart : true
	        },
	        userNo : {
	            required : true,
	            minlength : 5,
	            maxlength : 15
	        },
	        userName : "required",
	        sex : "required",
	        birthday : {
	            isDate : true
	        },
	        joinday : {
	            isDate : true
	        },
	        payday : {
	            isDate : true
	        },
	        country : {
	            countryLimit : true
	        },
	        phoneNo : {
	            isMobilPhone : true
	        },
	        email : "email",
	        totalWages : {
	            number : true,
	            max : 99999,
	            min : 3000
	        },
	        compTelephone : {
	            isTelephone : true
	        },
	        homeTelephone : {
	            isTelephone : true
	        }
	       
	    },
	    messages : {
	        fileNo : {
	            required : "请输入档案编号",
	            minlength : "编号长度至少为11位"
	        },
	        userNo : {
	            required : "请输入职员编号",
	            minlength : "编号长度不能少于5位",
	            maxlength : "编号长度不能大于15位"
	        },
	        userName :{
	            required : "用户名必须输入"
	        } ,
	        sex : {
	            required : "性别必须选择"
	        },
	        birthday : {
	            date : "必须输入日期格式"
	        },
	        joinday : {
	            date : "必须输入日期格式"
	        },
	        payday : {
	            date : "必须输入日期格式"
	        },
	        email : "请输入正确的邮件格式",
	        totalWages : {
	            number : "请输入数字",
	            max : "给的太高了，你是火星人吧！",
	            min : "不够深圳市最低标准！"
	        }
	    },
	    //显示校验信息的容器，本示例使用<span class="errorMsg" />做为容器，建议使用容器来避免和其它组件的dom元素交叉的问题
	    //比如使用omCombo的时候如果不使用容器将会导致样式错乱，根本原因是combo是在input外面包裹一层span再添加样式组成，而校验
	    //框架默认会再input后面加label标签从而导致combo组件样式混乱。
	     errorPlacement : function(error, element) { 
            if(error.html()){
                $(element).parents().map(function(){
                    var attentionElement = $(this).children().eq(2);
                    if(this.tagName.toLowerCase()=='td'){ 
                        attentionElement.html(error);
                        attentionElement.css('display','none'); //覆盖默认显示方法，先隐藏消息，等鼠标移动上去再显示
                        attentionElement.prev().prev().children("input").addClass("x-form-invalid");
                        if(attentionElement.prev().prev().children().length <= 0)
                            attentionElement.prev().prev().addClass("x-form-invalid");
                    }
                });
            }
        }, 
        //控制错误显示隐藏的方法，当自定义了显示方式之后一定要在这里做处理。
        showErrors: function(errorMap, errorList) {
            if(errorList && errorList.length > 0){
                $.each(errorList,function(index,obj){
                    var msg = this.message;
                    $(obj.element).parents().map(function(){
                        if(this.tagName.toLowerCase()=='td'){
                            var attentionElement =  $(this).children().eq(2);
                            attentionElement.prev().css("display","inline-block");
    	                    attentionElement.html(msg);
                        }
                    });
                });
            }else{
                $(this.currentElements).parents().map(function(){
                    $(this).children("input").removeClass("x-form-invalid");
                    //获取errorImg图标，如果不是则不执行hide操作
                    var errorImg = $(this).children().eq(1);
                    if(errorImg.hasClass("errorImg")){
                        errorImg.hide();
                    }
                });
            }
            this.defaultShowErrors();
        }
   });
    
    //*************************下面是自定义的校验规则************************************************
    
    //给输入框绑定鼠标经过事件，鼠标移动过去才显示校验信息
    $('.errorImg').bind('mouseover',function(e){
        //要有错误才显示
        var errorMsg = $(this).next();
        if(errorMsg.html().length > 0 && errorMsg.find("label").html().length > 0)
            errorMsg.css('display','inline').css({'top':e.pageY+10 , 'left':e.pageX+5});
    }).bind('mouseout',function(){
        $(this).next().css('display','none');
    });
    //自定义校验规则，如果选择的是英国，则校验不通过
    $.validator.addMethod("countryLimit", function(value) {
        if(value == '英国')return false;
        return  true;
    }, '您是中国人，不能选英国');
    //自定义移动电话规则
    $.validator.addMethod("isMobilPhone", function(value) {
        if(value == '') return true;
        var regu =/(^[1][3][0-9]{9}$)|(^[1][5][0-9]{9}$)|(^[1][8][0-9]{9}$)|(^[0][1-9]{1}[0-9]{9}$)/; 
        var reg = new RegExp(regu);
        return reg.test(value);  // 手机验证 13x 15x 18x 以此类推
    }, '不是有效的手机号码');
    //编号必须以DABH-开头 
    $.validator.addMethod("fileNoStart", function(value) {
        if(value.substring(0,5) != 'DABH-')return false;
        return  true;
    }, '编号必须以DABH-开头');
    //电话号码有效性校验
    $.validator.addMethod("isTelephone", function(str) {
        if(str == '') return true;
        if (str.match(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/) == null) {
            return false;
        }
        else {
            return true;
        }
    }, "不是有效的电话号码");
    //校验日期格式
    $.validator.addMethod("isDate", function(str) {
        if(str == '') return true;
        var value = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
        if (value == null) {
            return false;
        }
        else {
            var date = new Date(value[1], value[3] - 1, value[4]);
            return (date.getFullYear() == value[1] && (date.getMonth() + 1) == value[3] && date.getDate() == value[4]);
        }
    }, "日期格式不正确");
    
  //*************************下面是Ajax提交、计算自我评价字符个数、获取档案编号*********************
    
    $('#form1').submit(function() {
        if( $('#form1').valid()){
	        $(this).omAjaxSubmit({success:function(res){
	                if(res != '' && res != '1' && res != '0'){
	                    eval(res);
	                }else if(res == '1'){
	                    alert('提交成功！');
	                    $('button[type="reset"]').click();
	                    location.reload();
	                }else if(res == '0'){
	                    return ;
	                }
	            }
	       });
        }
      return false;//返回false,阻止浏览器默认行为
    });
    //从后台获取档案编号
    $.ajax({
        url : '../../omButtonServlet?method=getFileNo',
        success : function(data){
            $("#fileNo").val(data);
            //设置值之后就校验正确性
            $("#form1").validate().element( "#fileNo" );
        }
    });
});
//这里定义方法供后台调用，显示错误信息
function showCodeError()
{
    validator.showErrors({"userNo": "编号必须以ZGBH开头"});
}
</script>
<!-- view_source_end -->
</head>
<body >
<!-- view_source_begin -->
<div class="right clear">
	<div id="nav_cont">
		<h1 id="tag_1" class="cont_tag_show"></h1>
		<form id="form1" method="post" action="../../omButtonServlet">
			<input type="hidden" id="method" name="method"
				value="formValidateSubmit">
			<table width="100%" border="0" class="grid_layout" cellspacing="0">
				<tr class="style1">
					<td align="right" width="15%"><span class="color_red">*</span>档案编号：</td>
					<td colspan="3" width="65%"><input type="text" name="fileNo"
						id="fileNo" class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right"><span class="color_red">*</span>职工编号：</td>
					<td colspan="3"><input type="text" id="userNo" name="userNo"
						class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right"><span class="color_red">*</span>职工姓名：</td>
					<td colspan="3"><input type="text" name="userName"
						id="userName" class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right"><span class="color_red">*</span>性别：</td>
					<td><input name="sex" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">出生日期：</td>
					<td colspan="3"><input type="text" id="birthday"
						name="birthday" style="color: #aaa;" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">入职时间：</td>
					<td colspan="3"><input type="text" name="joinday"
						id="joinday" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">现住址：</td>
					<td colspan="3"><input name="nowAddress" id="nowAddress"
						class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">移动电话：</td>
					<td colspan="3"><input type="text" name="phoneNo"
						id="phoneNo" class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">办公电话：</td>
					<td colspan="3"><input type="text" name="compTelephone"
						id="compTelephone" class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">现住址电话：</td>
					<td colspan="3"><input type="text" name="homeTelephone"
						id="homeTelephone" class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">电子邮箱：</td>
					<td colspan="3"><input type="text" name="email" id="email"
						class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">发薪日：</td>
					<td colspan="3"><input type="text" name="payday" id="payday" />
						<span class="errorImg"></span><span class="errorMsg"></span></td>
				</tr>
				<tr>
					<td align="right">工资总额：</td>
					<td colspan="3"><input type="text" name="totalWages"
						id="totalWages" class="input_text" /> <span class="errorImg"></span><span
						class="errorMsg"></span></td>
				</tr>
			</table>
			<div class="separator"></div>
			<div class="text_align_c pad ">
				<button type="submit" class="button_u"
					onmousemove="this.className='button_f'"
					onmousedown="this.className='button_d'"
					onmouseout="this.className='button_u'">提交表单</button>&nbsp;
				<button class="button_u" type="reset"
					onmousemove="this.className='button_f'"
					onmousedown="this.className='button_d'"
					onmouseout="this.className='button_u'">&nbsp;&nbsp;重置&nbsp;&nbsp;</button>&nbsp;
			</div>
		</form>
	</div>
</div>
<!-- view_source_end -->
<div id="view-desc">
         <p>
            <b>企业表单综合校验示例二</b><br/>
                                  本案例的校验规则和“企业表单综合校验示例一”相同，唯一不同的是布局方式和错误信息的展现形式不同，
                                  由于此布局空间相对较大，故可以在输入框后面显示错误提示图标，鼠标移动上去显示校验内容的效果，
                                  像注册这种还可以直接显示校验内容，以减少鼠标移动的目的，提高用户体检，具体的修改方法请参考
              errorPlacement和showErrors两个方法。
         </p>
	</div>
</body>
<script type="text/javascript" src="../../demos/common/js/themeloader.js"></script>
</html>
